<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 第 04 天 —— 浮动 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/15.3ebf464d.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="sidebar-link">CSS 学习</a></li><li><a href="/basenode/css/day01.html" class="sidebar-link">CSS 第 01 天 —— 基础选择器</a></li><li><a href="/basenode/css/day02.html" class="sidebar-link">CSS 第 02 天 —— 复合选择器</a></li><li><a href="/basenode/css/day03.html" class="sidebar-link">CSS 第 03 天 —— 盒子模型</a></li><li><a href="/basenode/css/day04.html" aria-current="page" class="active sidebar-link">CSS 第 04 天 —— 浮动</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#能力目标" class="sidebar-link">能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆1-盒子模型案例" class="sidebar-link">☆1. 盒子模型案例</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_1-1-快报案例演练目标" class="sidebar-link">1.1 快报案例演练目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_1-2-案例素材" class="sidebar-link">1.2 案例素材</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_1-3-案例实现" class="sidebar-link">1.3 案例实现</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆1-4-案例小结" class="sidebar-link">☆1.4 案例小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆2-边框和阴影" class="sidebar-link">☆2. 边框和阴影</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_2-1-圆角边框原理" class="sidebar-link">2.1 圆角边框原理</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆2-2-圆角边框的使用" class="sidebar-link">☆2.2 圆角边框的使用</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆2-3-盒子阴影" class="sidebar-link">☆2.3 盒子阴影</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_2-4-文字阴影" class="sidebar-link">2.4 文字阴影</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆3-浮动基础" class="sidebar-link">☆3. 浮动基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_3-1-浮动导读" class="sidebar-link">3.1 浮动导读</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆3-2-传统网页布局三种方式" class="sidebar-link">☆3.2 传统网页布局三种方式</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_3-3-为什么需要浮动" class="sidebar-link">3.3 为什么需要浮动</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_3-4-什么是浮动" class="sidebar-link">3.4 什么是浮动</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆3-5-浮动特性-脱标" class="sidebar-link">☆3.5 浮动特性-脱标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_3-6-浮动特性-浮动元素一行显示" class="sidebar-link">3.6 浮动特性-浮动元素一行显示</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_3-7-浮动特性-浮动元素具有行内块特性" class="sidebar-link">3.7 浮动特性-浮动元素具有行内块特性</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_3-8-浮动元素经常搭配标准流的父元素" class="sidebar-link">3.8 浮动元素经常搭配标准流的父元素</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆3-9-浮动小结「扩展」" class="sidebar-link">☆3.9 浮动小结「扩展」</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆4-浮动案例" class="sidebar-link">☆4. 浮动案例</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆4-1-浮动布局练习-1" class="sidebar-link">☆4.1 浮动布局练习 1</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆4-2-浮动布局练习-2" class="sidebar-link">☆4.2 浮动布局练习 2</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆4-3-浮动练习-手机模块" class="sidebar-link">☆4.3 浮动练习-手机模块</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆4-4-常见的网页布局" class="sidebar-link">☆4.4 常见的网页布局</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆4-5-浮动的两个注意点" class="sidebar-link">☆4.5 浮动的两个注意点</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆5-清除浮动" class="sidebar-link">☆5. 清除浮动</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_5-1-为什么清除浮动" class="sidebar-link">5.1 为什么清除浮动</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_5-2-清除浮动本质以及额外标签法" class="sidebar-link">5.2 清除浮动本质以及额外标签法</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#_5-3-清除浮动之父元素-overflow" class="sidebar-link">5.3 清除浮动之父元素 overflow</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆5-4-清除浮动之-after-伪元素" class="sidebar-link">☆5.4 清除浮动之 after 伪元素</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆5-5-清除浮动之双伪元素" class="sidebar-link">☆5.5 清除浮动之双伪元素</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day04.html#☆5-6-清除浮动总结" class="sidebar-link">☆5.6 清除浮动总结</a></li></ul></li></ul></li><li><a href="/basenode/css/day05.html" class="sidebar-link">CSS 第 05 天 —— 学成在线</a></li><li><a href="/basenode/css/day06.html" class="sidebar-link">CSS 第 06 天 —— 定位</a></li><li><a href="/basenode/css/day07.html" class="sidebar-link">CSS 第 07 天 —— 高级技巧</a></li><li><a href="/basenode/css/day08.html" class="sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-第-04-天-浮动"><a href="#css-第-04-天-浮动" class="header-anchor">#</a> CSS 第 04 天 —— 浮动</h1> <h2 id="能力目标"><a href="#能力目标" class="header-anchor">#</a> 能力目标</h2> <ol><li>能够给盒子设置<strong>圆角边框</strong>和阴影，知道怎么给文字添加阴影；</li> <li>能够说出<strong>浮动的应用场景</strong>和<strong>布局套路</strong>，并应用浮动<strong>完成常见网页布局</strong>案例；</li> <li>能够说出<strong>清除浮动</strong>的原因，并知道 <strong>4 种清除浮动</strong>的方法，并<strong>至少记忆一种</strong>伪元素清除浮动的方法。</li></ol> <h2 id="☆1-盒子模型案例"><a href="#☆1-盒子模型案例" class="header-anchor">#</a> ☆1. 盒子模型案例</h2> <h3 id="_1-1-快报案例演练目标"><a href="#_1-1-快报案例演练目标" class="header-anchor">#</a> 1.1 快报案例演练目标</h3> <ol><li>局部盒子布局分析能力（从上到下）</li> <li>复习盒子模型相关属性</li> <li>实战技巧
<ol><li>分隔线的实现技巧</li> <li>取消无序列表的小圆点</li> <li>VSCode 的列选择快捷键</li></ol></li></ol> <h3 id="_1-2-案例素材"><a href="#_1-2-案例素材" class="header-anchor">#</a> 1.2 案例素材</h3> <div class="language-txt extra-class"><pre class="language-text"><code>品优购快报
【特惠】爆款耳机5折秒！
【特惠】母亲节，健康好礼低至5折！
【特惠】爆款耳机5折秒！
【特惠】9.9元洗100张照片！
【特惠】长虹智能空调立省1000
</code></pre></div><p><img src="/basenode/assets/img/news_mark.35e922e7.png" alt="测量标注"></p> <h3 id="_1-3-案例实现"><a href="#_1-3-案例实现" class="header-anchor">#</a> 1.3 案例实现</h3> <ol><li><p>HTML 结构搭建</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>品优购快报<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>【特惠】爆款耳机5折秒！<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>【特惠】母亲节，健康好礼低至5折！<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>【特惠】爆款耳机5折秒！<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>【特惠】9.9元洗100张照片！<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>【特惠】长虹智能空调立省1000<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>公共样式编写</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">a</span> <span class="token punctuation">{</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">li</span> <span class="token punctuation">{</span>
  <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>最外侧盒子</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 246px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 161px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 50px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>新闻标题</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box h3</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 31px<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px dotted #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>新闻列表</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box ul</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 7px 20px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box ul li</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 23px<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 23px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box ul a</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box ul a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="☆1-4-案例小结"><a href="#☆1-4-案例小结" class="header-anchor">#</a> ☆1.4 案例小结</h3> <ol><li><p>开发步骤</p> <ol><li>分析页面结构（如果内容太多，可以后续补充）</li> <li>编写公共样式</li> <li>从上向下从第一个大盒子开始
<ol><li>最外侧盒子需要有注释，辅助 CSS 分段和阅读</li></ol></li> <li><strong>从上向下，从左向右</strong>依次编写小盒子样式，直到一个大盒子完成</li> <li>如果小盒子<strong>比较复杂</strong>可以：
<ol><li>开始前<strong>增加背景颜色</strong>辅助调试</li> <li>结束后删除背景颜色</li></ol></li></ol></li> <li><p>分隔线的实现技巧</p> <ul><li>使用 <code>padding</code> 可以让分割线比文本长</li></ul></li> <li><p>取消无序列表的小圆点：<code>list-style: none;</code></p></li> <li><p>列选择快捷键 <code>ctrl + alt + shift + ↑ / ↓</code></p></li> <li><p>布局时务必要注意 <code>padding</code> 和 <code>border</code> 会对影响盒子大小</p></li></ol> <h2 id="☆2-边框和阴影"><a href="#☆2-边框和阴影" class="header-anchor">#</a> ☆2. 边框和阴影</h2> <h3 id="_2-1-圆角边框原理"><a href="#_2-1-圆角边框原理" class="header-anchor">#</a> 2.1 圆角边框原理</h3> <blockquote><p>第 2 节课 / 6'21''</p></blockquote> <h4 id="_2-1-1-「圆角边框原理」问题"><a href="#_2-1-1-「圆角边框原理」问题" class="header-anchor">#</a> 2.1.1 「圆角边框原理」问题</h4> <ul><li>问题 1：圆角边框的效果是什么？在网页布局中使用的多吗？</li> <li>问题 2：圆角边框的属性是什么？</li></ul> <h4 id="_2-1-2-「圆角边框原理」答案"><a href="#_2-1-2-「圆角边框原理」答案" class="header-anchor">#</a> 2.1.2 「圆角边框原理」答案</h4> <ul><li><p>问题 1：圆角边框的效果是什么？在网页布局中使用的多吗？</p> <ul><li>在边框的四周有一个圆形转角，让盒子视觉效果更好</li> <li>在网页布局中使用的多</li></ul></li> <li><p>问题 2：圆角边框的属性是什么？</p> <ul><li><code>border-radius</code></li></ul></li></ul> <h3 id="☆2-2-圆角边框的使用"><a href="#☆2-2-圆角边框的使用" class="header-anchor">#</a> ☆2.2 圆角边框的使用</h3> <blockquote><p>第 2 节课 / 7'43''</p></blockquote> <h4 id="_2-2-1-「圆角边框的使用」问题"><a href="#_2-2-1-「圆角边框的使用」问题" class="header-anchor">#</a> 2.2.1 「圆角边框的使用」问题</h4> <ul><li>问题 1：怎么做圆形？</li> <li>问题 2：怎么做圆角矩形？</li> <li>问题 3：怎么设置不同的圆角？</li></ul> <h4 id="_2-2-2-「圆角边框的使用」答案"><a href="#_2-2-2-「圆角边框的使用」答案" class="header-anchor">#</a> 2.2.2 「圆角边框的使用」答案</h4> <ul><li><p>问题 1：怎么做圆形？</p> <ul><li><code>border-radius: 50%;</code></li> <li>正方形盒子是圆形 / 长方形盒子是椭圆</li></ul></li> <li><p>问题 2：怎么做圆角矩形？</p> <ul><li><code>border-radius: 高度的一半;</code></li> <li>长方形盒子（宽 &gt; 高）</li></ul></li> <li><p>问题 3：怎么设置不同的圆角？</p> <ul><li><p><code>border-radius: 10px 20px 30px 40px;</code> 左上 → 右上 → 右下 → 左下（顺时针）</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-top-left-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">border-top-right-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
</code></pre></div></li></ul></li></ul> <h3 id="☆2-3-盒子阴影"><a href="#☆2-3-盒子阴影" class="header-anchor">#</a> ☆2.3 盒子阴影</h3> <blockquote><p>第 2 节课 / 9'03''</p></blockquote> <h4 id="_2-3-1-「盒子阴影」问题"><a href="#_2-3-1-「盒子阴影」问题" class="header-anchor">#</a> 2.3.1 「盒子阴影」问题</h4> <ul><li>问题 1：盒子阴影属性都有哪些（别硬记）？</li> <li>问题 2：盒子阴影会影响盒子大小吗？</li> <li>问题 3：<code>div</code> 能使用 <code>:hover</code> 吗？为什么？</li></ul> <h4 id="_2-3-2-「盒子阴影」答案"><a href="#_2-3-2-「盒子阴影」答案" class="header-anchor">#</a> 2.3.2 「盒子阴影」答案</h4> <ul><li><p>问题 1：盒子阴影属性都有哪些（别硬记）？</p> <blockquote><p>前两个数是<strong>方向</strong>，后两个数是<strong>半径</strong>，然后是<strong>颜色</strong>，最后一个几乎用不到。</p></blockquote> <table><thead><tr><th>值</th> <th>描述</th></tr></thead> <tbody><tr><td>h-shadow</td> <td>必须，x 偏移量，允许负值</td></tr> <tr><td>v-shadow</td> <td>必须，y 偏移量，允许负值</td></tr> <tr><td>blur</td> <td>可选，阴影模糊半径</td></tr> <tr><td>spread</td> <td>可选，阴影扩散半径</td></tr> <tr><td>color</td> <td>可选，阴影颜色</td></tr> <tr><td>inset</td> <td>可选，内部阴影，直接写单词即可</td></tr></tbody></table> <p><strong>示例代码</strong>：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* x偏移量 | y偏移量 | 阴影颜色 */</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 60px -16px teal<span class="token punctuation">;</span>

<span class="token comment">/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 10px 5px 5px black<span class="token punctuation">;</span>

<span class="token comment">/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 2px 2px 2px 1px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 5em 1em gold<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>问题 2：盒子阴影会影响盒子大小吗？</p> <ul><li>不会</li></ul></li> <li><p>问题 3：<code>div</code> 能使用 <code>:hover</code> 吗？为什么？</p> <ul><li>可以</li> <li>伪类是状态 / <code>div</code> 同样存在<strong>鼠标经过</strong>状态</li></ul></li></ul> <h4 id="_2-3-3-「圆角边框-盒子阴影」练习"><a href="#_2-3-3-「圆角边框-盒子阴影」练习" class="header-anchor">#</a> 2.3.3 「圆角边框 &amp; 盒子阴影」练习</h4> <ul><li>练习时间（05'00'')</li> <li>练习内容
<ol><li>绘制一个圆形盒子</li> <li>鼠标经过显示盒子阴影</li></ol></li></ul> <h3 id="_2-4-文字阴影"><a href="#_2-4-文字阴影" class="header-anchor">#</a> 2.4 文字阴影</h3> <blockquote><p>第 2 节课 / 1'54''</p></blockquote> <h4 id="_2-4-1-「文字阴影」问题"><a href="#_2-4-1-「文字阴影」问题" class="header-anchor">#</a> 2.4.1 「文字阴影」问题</h4> <ul><li>问题 1：文字阴影属性都有哪些（别硬记）？</li></ul> <h4 id="_2-4-2-「文字阴影」答案"><a href="#_2-4-2-「文字阴影」答案" class="header-anchor">#</a> 2.4.2 「文字阴影」答案</h4> <ul><li><p>问题 1：文字阴影属性都有哪些（别硬记）？</p> <blockquote><p>前两个数是<strong>方向</strong>，后两个数是<strong>半径</strong>，然后是<strong>颜色</strong>，最后一个几乎用不到。</p></blockquote> <table><thead><tr><th>值</th> <th>描述</th></tr></thead> <tbody><tr><td>h-shadow</td> <td>必须，x 偏移量，允许负值</td></tr> <tr><td>v-shadow</td> <td>必须，y 偏移量，允许负值</td></tr> <tr><td>blur</td> <td>可选，阴影模糊半径</td></tr> <tr><td>color</td> <td>可选，阴影颜色</td></tr></tbody></table> <p><strong>示例代码</strong>：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* x偏移量 | y偏移量 | 阴影颜色 */</span>
<span class="token property">text-shadow</span><span class="token punctuation">:</span> 5px 5px 5px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ul> <h2 id="☆3-浮动基础"><a href="#☆3-浮动基础" class="header-anchor">#</a> ☆3. 浮动基础</h2> <h3 id="_3-1-浮动导读"><a href="#_3-1-浮动导读" class="header-anchor">#</a> 3.1 浮动导读</h3> <blockquote><p>第 2 节课 / 2'01'' / 过渡视频，介绍浮动的学习路径：</p></blockquote> <ol><li>概念
<ol><li>说出为什么需要浮动</li> <li>说出浮动的排列特性</li> <li>说出三种最常见的布局方式</li> <li>说出为什么要清除浮动</li></ol></li> <li>综合案例 - 学成在线（明天）
<ol><li>用像素大厨测量 PSD 文件</li> <li>完成学成在线页面布局</li></ol></li></ol> <blockquote><p>现在切图是平面设计师的工作，而如何使用设计稿才是前端工程师必备技能。</p></blockquote> <h3 id="☆3-2-传统网页布局三种方式"><a href="#☆3-2-传统网页布局三种方式" class="header-anchor">#</a> ☆3.2 传统网页布局三种方式</h3> <blockquote><p>第 2 节课 / 4'46''</p></blockquote> <h4 id="_3-2-1-「传统网页布局三种方式」问题"><a href="#_3-2-1-「传统网页布局三种方式」问题" class="header-anchor">#</a> 3.2.1 「传统网页布局三种方式」问题</h4> <ul><li>问题 1：传统网页布局有哪三种方式？</li> <li>问题 2：标准流（文档流）是如何布局的？</li></ul> <h4 id="_3-2-2-「传统网页布局三种方式」答案"><a href="#_3-2-2-「传统网页布局三种方式」答案" class="header-anchor">#</a> 3.2.2 「传统网页布局三种方式」答案</h4> <ul><li><p>问题 1：传统网页布局有哪三种方式？</p> <ul><li>标准流（文档流）</li> <li>浮动</li> <li>定位</li></ul></li> <li><p>问题 2：标准流（文档流）是如何布局的？</p> <ul><li>标签按照规定好的默认方式排列（块级元素、行内元素）；</li> <li>标准流是最基本的布局方式。</li></ul></li></ul> <h3 id="_3-3-为什么需要浮动"><a href="#_3-3-为什么需要浮动" class="header-anchor">#</a> 3.3 为什么需要浮动</h3> <blockquote><p>第 3 节课 / 5'18''</p></blockquote> <h4 id="_3-3-1-「为什么需要浮动」问题"><a href="#_3-3-1-「为什么需要浮动」问题" class="header-anchor">#</a> 3.3.1 「为什么需要浮动」问题</h4> <ul><li>问题 1：浮动能解决什么问题？</li> <li>问题 2：网页布局的准则是什么？</li></ul> <h4 id="_3-3-2-「为什么需要浮动」答案"><a href="#_3-3-2-「为什么需要浮动」答案" class="header-anchor">#</a> 3.3.2 「为什么需要浮动」答案</h4> <ul><li><p>问题 1：浮动能解决什么问题？</p> <ol><li>让多个块级元素（不改变显示方式）水平排成一行</li> <li>让两个块级元素一个左对齐，一个右对齐</li></ol></li> <li><p>问题 2：网页布局的准则是什么？</p> <ol><li>多个块级元素纵向排列 —— 标准流</li> <li>多个块级元素横向排列 —— 浮动</li></ol></li></ul> <h3 id="_3-4-什么是浮动"><a href="#_3-4-什么是浮动" class="header-anchor">#</a> 3.4 什么是浮动</h3> <blockquote><p>第 3 节课 / 4'50''</p></blockquote> <h4 id="_3-4-1-「什么是浮动」问题"><a href="#_3-4-1-「什么是浮动」问题" class="header-anchor">#</a> 3.4.1 「什么是浮动」问题</h4> <ul><li>问题 1：浮动的概念是什么？</li> <li>问题 2：浮动的方向有几个？语法怎么写？</li></ul> <h4 id="_3-4-2-「什么是浮动」答案"><a href="#_3-4-2-「什么是浮动」答案" class="header-anchor">#</a> 3.4.2 「什么是浮动」答案</h4> <ul><li><p>问题 1：浮动的概念是什么？</p> <ul><li><code>float</code> 属性用于创建<strong>浮动框</strong>，直到<strong>左边缘</strong>或<strong>右边缘</strong>触及包含块或另一个浮动框的边缘。</li></ul></li> <li><p>问题 2：浮动的方向有几个？语法怎么写？</p> <ul><li><strong>左浮动</strong>：<code>float: left;</code></li> <li><strong>右浮动</strong>：<code>float: right</code></li></ul></li></ul> <h4 id="_3-4-3-「什么是浮动」练习"><a href="#_3-4-3-「什么是浮动」练习" class="header-anchor">#</a> 3.4.3 「什么是浮动」练习</h4> <ul><li>练习时间（05'00'')</li> <li>练习内容
<ol><li>绘制一个 <code>.w</code> 的盒子，宽度 <code>800px</code> / 高度 <code>400px</code></li> <li>在 <code>.w</code> 中定义两个盒子：<code>.left</code> 和 <code>.right</code>，宽高都是 <code>100px</code></li> <li>让 <code>.left</code> 盒子左浮动 / <code>.right</code> 盒子右浮动</li></ol></li></ul> <h3 id="☆3-5-浮动特性-脱标"><a href="#☆3-5-浮动特性-脱标" class="header-anchor">#</a> ☆3.5 浮动特性-脱标</h3> <blockquote><p>第 3 节课 / 6'34''</p></blockquote> <h4 id="_3-5-1-「浮动特性-脱标」问题"><a href="#_3-5-1-「浮动特性-脱标」问题" class="header-anchor">#</a> 3.5.1 「浮动特性-脱标」问题</h4> <ul><li>问题 1：元素浮动后具有哪三个特性？</li> <li>问题 2：盒子脱标后还会保留原有位置吗？表现是什么？</li></ul> <h4 id="_3-5-2-「浮动特性-脱标」答案"><a href="#_3-5-2-「浮动特性-脱标」答案" class="header-anchor">#</a> 3.5.2 「浮动特性-脱标」答案</h4> <ul><li><p>问题 1：元素浮动后具有哪三个特性？</p> <ol><li>脱离标准流（<strong>脱标</strong>）</li> <li>一行显示并且顶部对齐</li> <li>具有行内块元素的特性</li></ol></li> <li><p>问题 2：盒子脱标后还会保留原有位置吗？表现是什么？</p> <ul><li>不会</li> <li>后续的盒子会占据被浮动盒子原有的位置</li></ul></li></ul> <h3 id="_3-6-浮动特性-浮动元素一行显示"><a href="#_3-6-浮动特性-浮动元素一行显示" class="header-anchor">#</a> 3.6 浮动特性-浮动元素一行显示</h3> <blockquote><p>第 3 节课 / 3'48''</p></blockquote> <h4 id="_3-6-1-「浮动特性-浮动元素一行显示」问题"><a href="#_3-6-1-「浮动特性-浮动元素一行显示」问题" class="header-anchor">#</a> 3.6.1 「浮动特性-浮动元素一行显示」问题</h4> <ul><li>问题 1：几个浮动元素之间会有缝隙吗？会按照什么方式对齐？</li> <li>问题 2：如果父级盒子宽度装不下浮动的盒子，会发生什么情况？</li></ul> <h4 id="_3-6-2-「浮动特性-浮动元素一行显示」答案"><a href="#_3-6-2-「浮动特性-浮动元素一行显示」答案" class="header-anchor">#</a> 3.6.2 「浮动特性-浮动元素一行显示」答案</h4> <ul><li><p>问题 1：几个浮动元素之间会有缝隙吗？会按照什么方式对齐？</p> <ul><li>不会有缝隙（与 <code>inline-block</code> 不同）</li> <li>会按照顶部对齐</li></ul></li> <li><p>问题 2：如果父级盒子宽度装不下浮动的盒子，会发生什么情况？</p> <ul><li>上一排空间不够的盒子会被<strong>挤</strong>下来</li></ul></li></ul> <h3 id="_3-7-浮动特性-浮动元素具有行内块特性"><a href="#_3-7-浮动特性-浮动元素具有行内块特性" class="header-anchor">#</a> 3.7 浮动特性-浮动元素具有行内块特性</h3> <blockquote><p>第 3 节课 / 4'39''</p></blockquote> <h4 id="_3-7-1-「浮动特性-浮动元素具有行内块特性」问题"><a href="#_3-7-1-「浮动特性-浮动元素具有行内块特性」问题" class="header-anchor">#</a> 3.7.1 「浮动特性-浮动元素具有行内块特性」问题</h4> <ul><li>问题 1：行内元素能使用浮动吗？浮动之后能指定宽高吗？</li> <li>问题 2：行内元素有了浮动属性后，还需要使用 <code>display: inline-block</code> 吗？</li> <li>问题 3：如果没有给块级盒子设置宽度，默认宽度是什么？浮动之后的宽度是什么？</li></ul> <h4 id="_3-7-2-「浮动特性-浮动元素具有行内块特性」答案"><a href="#_3-7-2-「浮动特性-浮动元素具有行内块特性」答案" class="header-anchor">#</a> 3.7.2 「浮动特性-浮动元素具有行内块特性」答案</h4> <ul><li><p>问题 1：行内元素能使用浮动吗？浮动之后能指定宽高吗？</p> <ul><li>行内元素同样可以使用浮动</li> <li>行内元素浮动之后可以指定宽高</li></ul></li> <li><p>问题 2：行内元素有了浮动属性后，还需要使用 <code>display: inline-block</code> 吗？</p> <ul><li>行内元素浮动之后可以指定宽高，不再需要转换显示模式</li></ul></li> <li><p>问题 3：如果没有给块级盒子设置宽度，默认宽度是什么？浮动之后的宽度是什么？</p> <ul><li>默认宽度是父级盒子的宽度</li> <li>浮动之后宽度由内容来决定</li></ul></li></ul> <h3 id="_3-8-浮动元素经常搭配标准流的父元素"><a href="#_3-8-浮动元素经常搭配标准流的父元素" class="header-anchor">#</a> 3.8 浮动元素经常搭配标准流的父元素</h3> <blockquote><p>第 3 节课 / 3'13''</p></blockquote> <h4 id="_3-8-1-「浮动元素经常搭配标准流的父元素」问题"><a href="#_3-8-1-「浮动元素经常搭配标准流的父元素」问题" class="header-anchor">#</a> 3.8.1 「浮动元素经常搭配标准流的父元素」问题</h4> <ul><li>问题 1：在网页布局时，标准流的父盒子负责什么？</li> <li>问题 2：在网页布局时，浮动的子盒子负责什么？</li></ul> <h4 id="_3-8-2-「浮动元素经常搭配标准流的父元素」答案"><a href="#_3-8-2-「浮动元素经常搭配标准流的父元素」答案" class="header-anchor">#</a> 3.8.2 「浮动元素经常搭配标准流的父元素」答案</h4> <ul><li><p>问题 1：在网页布局时，标准流的父盒子负责什么？</p> <ul><li>标准流的父盒子排列上下位置</li></ul></li> <li><p>问题 2：在网页布局时，浮动的子盒子负责什么？</p> <ul><li>浮动的子盒子负责在父盒子中横向排列</li></ul></li></ul> <h3 id="☆3-9-浮动小结「扩展」"><a href="#☆3-9-浮动小结「扩展」" class="header-anchor">#</a> ☆3.9 浮动小结「扩展」</h3> <ol><li><p>应用场景：与标准流的父盒子搭配使用</p> <ol><li>标准流父盒子负责上下</li> <li>浮动子盒子负责左右</li> <li>内容套在子盒子内部，子盒子最好不要既负责布局，又要负责内容</li></ol></li> <li><p>浮动的元素会脱标 —— 下方的盒子会占据原有的位置</p> <ol><li>父盒子中的所有<strong>亲儿子</strong>盒子<strong>一起浮动</strong></li></ol></li> <li><p>浮动相比较 <code>inline-block</code> 的优势</p> <ol><li>没有缝隙</li> <li>顶端对齐（<code>inline-block</code> 会按照文字对齐方式对齐）</li></ol></li> <li><p>初学浮动布局的痛点</p> <ol><li>务必要<strong>控制好每个盒子的宽度</strong>，宽度不够会掉下去</li> <li>用调试工具检查盒子位置最靠谱，千万不要盯着代码看</li> <li><code>* {margin: 0; padding: 0}</code> 不要忘</li></ol></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>负责布局的盒子就只负责布局，不要监管内容。</p> <ul><li>盒子多能保证呆在靠谱的位置比什么都强；</li> <li>盒子少既要负责布局，又要负责内容，稍微复杂就乱套。</li></ul></div> <h2 id="☆4-浮动案例"><a href="#☆4-浮动案例" class="header-anchor">#</a> ☆4. 浮动案例</h2> <h3 id="☆4-1-浮动布局练习-1"><a href="#☆4-1-浮动布局练习-1" class="header-anchor">#</a> ☆4.1 浮动布局练习 1</h3> <blockquote><p>第 4 节课 / 4'09''</p></blockquote> <h4 id="_4-1-1-「浮动布局练习-1」目标"><a href="#_4-1-1-「浮动布局练习-1」目标" class="header-anchor">#</a> 4.1.1 「浮动布局练习 1」目标</h4> <ol><li>练习标准流的父盒子 + 浮动子盒子的写法</li></ol> <h4 id="_4-1-2-「浮动布局练习-1」步骤"><a href="#_4-1-2-「浮动布局练习-1」步骤" class="header-anchor">#</a> 4.1.2 「浮动布局练习 1」步骤</h4> <ol><li>定义父盒子大小位置</li> <li>增加父盒子的背景色</li> <li>定义每个子盒子的大小</li> <li>让子盒子浮动确认位置正确</li> <li>删除父盒子的背景色（初学者千万不要嫌麻烦）</li></ol> <h3 id="☆4-2-浮动布局练习-2"><a href="#☆4-2-浮动布局练习-2" class="header-anchor">#</a> ☆4.2 浮动布局练习 2</h3> <blockquote><p>第 4 节课 / 9'16''</p></blockquote> <h4 id="_4-2-1-「浮动布局练习-2」目标"><a href="#_4-2-1-「浮动布局练习-2」目标" class="header-anchor">#</a> 4.2.1 「浮动布局练习 2」目标</h4> <ol><li>大盒子 + 4 个浮动子盒子</li> <li>多个子盒子宽度相同，间距相同，且能够完整在大盒子中排放的技巧</li> <li>不用后代选择器的隐患</li></ol> <h4 id="_4-2-2-「浮动布局练习-2」技巧"><a href="#_4-2-2-「浮动布局练习-2」技巧" class="header-anchor">#</a> 4.2.2 「浮动布局练习 2」技巧</h4> <ol><li><p>最后一个盒子的 <code>margin-right: 0;</code>；</p></li> <li><p>如果测量不精准或者设计师不专业怎么办？</p> <ul><li><code>大盒子宽度 = n * 盒子宽度 + (n - 1) * 盒子间距</code></li></ul></li> <li><p>要使用后代选择器，否则会出现因权重不够样式不生效的情况</p></li></ol> <h3 id="☆4-3-浮动练习-手机模块"><a href="#☆4-3-浮动练习-手机模块" class="header-anchor">#</a> ☆4.3 浮动练习-手机模块</h3> <h4 id="_4-3-1-「浮动练习-手机模块」目标"><a href="#_4-3-1-「浮动练习-手机模块」目标" class="header-anchor">#</a> 4.3.1 「浮动练习-手机模块」目标</h4> <ol><li>子代选择器的经典应用场景</li> <li>先定大小，后定位置</li> <li>盒子套盒子 —— 前端布局基本功</li></ol> <h3 id="☆4-4-常见的网页布局"><a href="#☆4-4-常见的网页布局" class="header-anchor">#</a> ☆4.4 常见的网页布局</h3> <h4 id="_4-4-1-「常见的网页布局」目标"><a href="#_4-4-1-「常见的网页布局」目标" class="header-anchor">#</a> 4.4.1 「常见的网页布局」目标</h4> <ol><li>认知<strong>通栏</strong>和<strong>版心</strong></li> <li>盒子套盒子 —— 前端布局基本功</li></ol> <h3 id="☆4-5-浮动的两个注意点"><a href="#☆4-5-浮动的两个注意点" class="header-anchor">#</a> ☆4.5 浮动的两个注意点</h3> <blockquote><p>第 5 节课 / 7'50''</p></blockquote> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ol><li>子浮父不浮</li> <li>兄弟一起浮</li></ol></div> <h2 id="☆5-清除浮动"><a href="#☆5-清除浮动" class="header-anchor">#</a> ☆5. 清除浮动</h2> <h3 id="_5-1-为什么清除浮动"><a href="#_5-1-为什么清除浮动" class="header-anchor">#</a> 5.1 为什么清除浮动</h3> <blockquote><p>第 6 节课 / 3'13''</p></blockquote> <h4 id="_5-1-1-「为什么清除浮动」问题"><a href="#_5-1-1-「为什么清除浮动」问题" class="header-anchor">#</a> 5.1.1 「为什么清除浮动」问题</h4> <ul><li>问题 1：所有父盒子都能准确指定高度吗？</li> <li>问题 2：有哪些场景不方便指定盒子高度？</li> <li>问题 3：如果子盒子全部浮动，父盒子的高度能被撑开吗？为什么？</li> <li>问题 4：为什么要清除浮动（面试题）？</li></ul> <h4 id="_5-1-2-「为什么清除浮动」答案"><a href="#_5-1-2-「为什么清除浮动」答案" class="header-anchor">#</a> 5.1.2 「为什么清除浮动」答案</h4> <ul><li><p>问题 1：所有父盒子都能准确指定高度吗？</p> <ul><li>不能</li></ul></li> <li><p>问题 2：有哪些场景不方便指定盒子高度？</p> <ul><li>京东商城的产品特别多</li> <li>新闻内容</li></ul></li> <li><p>问题 3：如果子盒子全部浮动，父盒子的高度能被撑开吗？为什么？</p> <ul><li>不能</li> <li>盒子浮动后，会脱标，一旦脱标，原有位置不再保留</li></ul></li> <li><p>问题 4：为什么要清除浮动（面试题）？</p> <ul><li>如果在开发时，不方便给父盒子指定高度，子盒浮动后（脱标），不占有原有位置，导致父盒子高度为 0，最终影响到下方的盒子</li></ul></li></ul> <h3 id="_5-2-清除浮动本质以及额外标签法"><a href="#_5-2-清除浮动本质以及额外标签法" class="header-anchor">#</a> 5.2 清除浮动本质以及额外标签法</h3> <blockquote><p>第 6 节课 / 7'51''</p></blockquote> <h4 id="_5-2-1-「清除浮动本质以及额外标签法」问题"><a href="#_5-2-1-「清除浮动本质以及额外标签法」问题" class="header-anchor">#</a> 5.2.1 「清除浮动本质以及额外标签法」问题</h4> <ul><li>问题 1：清除浮动的本质是什么？</li> <li>问题 2：清除浮动的属性是什么？</li> <li>问题 3：额外标签法如何使用？</li> <li>问题 4：额外标签法有什么优缺点？</li></ul> <h4 id="_5-2-2-「清除浮动本质以及额外标签法」答案"><a href="#_5-2-2-「清除浮动本质以及额外标签法」答案" class="header-anchor">#</a> 5.2.2 「清除浮动本质以及额外标签法」答案</h4> <ul><li><p>问题 1：清除浮动的本质是什么？</p> <ul><li>清除浮动元素脱标后造成的影响</li> <li>清除浮动后，父盒子可以根据浮动的子盒子<strong>自动检测高度</strong>，<strong>父盒子有了高度</strong>，就不会对下方的标准流造成影响了。</li></ul></li> <li><p>问题 2：清除浮动的属性是什么？</p> <ul><li><code>clear: both;</code></li></ul></li> <li><p>问题 3：额外标签法如何使用？</p> <ul><li>在浮动元素末尾添加一个空的 <code>div</code></li> <li>设置该 <code>div</code> 的样式为 <code>clear: both;</code></li></ul></li> <li><p>问题 4：额外标签法有什么优缺点？</p> <ul><li>优点：通俗易懂 / 书写方便 / W3C 推荐</li> <li>缺点：添加许多无意义的标签，结构化较差</li></ul></li></ul> <h3 id="_5-3-清除浮动之父元素-overflow"><a href="#_5-3-清除浮动之父元素-overflow" class="header-anchor">#</a> 5.3 清除浮动之父元素 overflow</h3> <blockquote><p>第 6 节课 / 2'33''</p></blockquote> <h4 id="_5-3-1-「清除浮动之父元素-overflow」问题"><a href="#_5-3-1-「清除浮动之父元素-overflow」问题" class="header-anchor">#</a> 5.3.1 「清除浮动之父元素 overflow」问题</h4> <ul><li>问题 1：如何用 <code>overflow</code> 清除浮动？</li> <li>问题 2：用 <code>overflow</code> 清除浮动有什么优缺点？</li></ul> <h4 id="_5-3-2-「清除浮动之父元素-overflow」答案"><a href="#_5-3-2-「清除浮动之父元素-overflow」答案" class="header-anchor">#</a> 5.3.2 「清除浮动之父元素 overflow」答案</h4> <ul><li><p>问题 1：如何用 <code>overflow</code> 清除浮动？</p> <ul><li>给父元素添加 <code>overflow</code> 属性，将其属性设置为 <code>hidden</code>、<code>auto</code>、<code>scroll</code> 都可以；</li> <li>通常设置 <code>overflow: hidden</code>；</li></ul></li> <li><p>问题 2：用 <code>overflow</code> 清除浮动有什么优缺点？</p> <ul><li>优点：代码简单 / 好记忆</li> <li>缺点：无法显示溢出部分，面试会被追问</li></ul></li></ul> <h3 id="☆5-4-清除浮动之-after-伪元素"><a href="#☆5-4-清除浮动之-after-伪元素" class="header-anchor">#</a> ☆5.4 清除浮动之 after 伪元素</h3> <blockquote><p>第 6 节课 / 5'04''</p></blockquote> <h4 id="_5-4-1-「清除浮动之-after-伪元素」问题"><a href="#_5-4-1-「清除浮动之-after-伪元素」问题" class="header-anchor">#</a> 5.4.1 「清除浮动之 after 伪元素」问题</h4> <ul><li>问题 1：<code>::after</code> 伪元素清除浮动的代码是什么？</li></ul> <h4 id="_5-4-2-「清除浮动之-after-伪元素」答案"><a href="#_5-4-2-「清除浮动之-after-伪元素」答案" class="header-anchor">#</a> 5.4.2 「清除浮动之 after 伪元素」答案</h4> <ul><li><p>问题 1：<code>::after</code> 伪元素清除浮动的代码是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.clearfix::after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
  <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <h4 id="_5-4-3-「清除浮动之-after-伪元素」伪类和伪元素"><a href="#_5-4-3-「清除浮动之-after-伪元素」伪类和伪元素" class="header-anchor">#</a> 5.4.3 「清除浮动之 after 伪元素」伪类和伪元素</h4> <ol><li><strong>伪类</strong>表示标签的某个状态，没有内容，用 <code>:</code> 表示</li> <li><strong>伪元素</strong>在标签前 / 后增加内容，有内容但是不需要独立的标签，用 <code>::</code> 表示
<ol><li><code>::after</code> 标签后添加内容</li> <li><code>::before</code> 标签前添加内容</li></ol></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>*zoom</code> 属于 CSS Hack 写法，不需要记忆。</p></div> <h3 id="☆5-5-清除浮动之双伪元素"><a href="#☆5-5-清除浮动之双伪元素" class="header-anchor">#</a> ☆5.5 清除浮动之双伪元素</h3> <blockquote><p>第 6 节课 / 3'02''</p></blockquote> <h4 id="_5-5-1-「清除浮动之双伪元素」问题"><a href="#_5-5-1-「清除浮动之双伪元素」问题" class="header-anchor">#</a> 5.5.1 「清除浮动之双伪元素」问题</h4> <ul><li>问题 1：<strong>双伪元素</strong>清除浮动的代码是什么？</li></ul> <h4 id="_5-5-2-「清除浮动之双伪元素」答案"><a href="#_5-5-2-「清除浮动之双伪元素」答案" class="header-anchor">#</a> 5.5.2 「清除浮动之双伪元素」答案</h4> <ul><li><p>问题 1：<strong>双伪元素</strong>清除浮动的代码是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.clearfix::before,
.clearfix::after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.clearfix::after</span> <span class="token punctuation">{</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <h3 id="☆5-6-清除浮动总结"><a href="#☆5-6-清除浮动总结" class="header-anchor">#</a> ☆5.6 清除浮动总结</h3> <blockquote><p>第 6 节课 / 2'49''</p></blockquote> <ol><li><p>为什么清除浮动？</p> <ul><li>子盒子浮动 → 脱离原有位置 → 父级没有高度 → 影响后续标准流盒子</li></ul></li> <li><p>清除浮动的方法</p> <table><thead><tr><th>方法</th> <th>优点</th> <th>缺点</th></tr></thead> <tbody><tr><td>额外标签法（隔墙法）</td> <td>通俗易懂，书写简单</td> <td>添加许多无意义的标签，结构化较差</td></tr> <tr><td>父元素 <code>overflow: hidden;</code></td> <td>书写简单</td> <td>无法显示溢出部分，面试会被追问</td></tr> <tr><td>父级 after 伪元素</td> <td>结构语义正确</td> <td>IE 6~7 不支持伪元素</td></tr> <tr><td>父级双伪元素</td> <td>结构语义正确</td> <td>IE 6~7 不支持伪元素</td></tr></tbody></table></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/css/day03.html" class="prev">
        CSS 第 03 天 —— 盒子模型
      </a></span> <span class="next"><a href="/basenode/css/day05.html">
        CSS 第 05 天 —— 学成在线
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/15.3ebf464d.js" defer></script>
  </body>
</html>
